<template>
  <view class="product-manage">
    <text class="page-title">商品管理</text>
    <!-- 商品列表 -->
    <view class="product-list">
      <view 
        class="product-item" 
        v-for="product in productList" 
        :key="product.id"
      >
        <image class="product-img" :src="product.cover" mode="aspectFill" />
        <text class="product-name">{{ product.name }}</text>
        <text class="product-price">￥{{ product.price.toFixed(2) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue';

// ------------------------------ 类型定义 ------------------------------
/** 商品项数据结构 */
interface ProductItem {
  id: number;         // 商品ID
  name: string;       // 商品名称
  price: number;      // 商品价格
  cover: string;      // 商品封面图路径
}

// ------------------------------ 响应式数据 ------------------------------
/** 商品列表（响应式数组） */
const productList = reactive<ProductItem[]>([
  { 
    id: 1, 
    name: '智能手表', 
    price: 899.00, 
    cover: '/static/product1.jpg' 
  },
  { 
    id: 2, 
    name: '无线耳机', 
    price: 299.00, 
    cover: '/static/product2.jpg' 
  },
  { 
    id: 3, 
    name: '机械键盘', 
    price: 499.00, 
    cover: '/static/product3.jpg' 
  }
]);

// ------------------------------ 生命周期 ------------------------------
/** 页面加载时执行 */
onMounted(() => {
  console.log('商品管理页加载，当前导航 ID：product');
});
</script>

<style scoped>
.product-manage {
  height: 100%;
  padding: 24px; /* 可选：增加内边距避免内容贴边 */
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 24px;
  color: #2c3e50;
}

.product-list {
  display: grid;
  gap: 16px;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 可选：增加轻微阴影提升层次感 */
}

.product-img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  margin-right: 16px;
  object-fit: cover; /* 确保图片比例正确（uni-app 中 mode="aspectFill" 已处理） */
}

.product-name {
  font-size: 16px;
  color: #34495e;
  margin-right: 16px;
  flex: 1; /* 占据剩余空间 */
  overflow: hidden; /* 避免长文本溢出 */
  text-overflow: ellipsis; /* 长文本显示省略号 */
  white-space: nowrap; /* 文本不换行 */
}

.product-price {
  font-size: 16px;
  color: #e74c3c;
  font-weight: bold;
}
</style>